<template>
  <div class="ticketPurchase">
    <myHead title="购票"></myHead>
    <!--    轮播图  -->
    <div class="index_lunbo">
      <div class="swiper-container" style="width: 100%;">
        <div class="swiper-wrapper" style="width: 100%;">
          <div class="swiper-slide" v-for='el in lunbolist'>
            <img :src="el.url">
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="mv_info">
      <div class="mv_tit"><p>花木兰</p><p>Magnolia</p></div>
      <div class="star">
        <van-rate allow-half v-model="9.5/2" readonly color="#FF7005" />
        <p>{{9.5}}分</p>
      </div>
      <div class="mv_msg">
        <p>《何以为家》，表面上看，是一个12岁的流浪少年渴望有个家、渴望有父母之爱，却又在得不到后憎恶家、逃离家的故事。但其所反映出的社会问题令人唏嘘不已，战争的阴影随处可见，孩子们过着是影片。</p>
        <el-collapse-transition>
          <div v-show="showInfo">
            <div class="transition-box">《何以为家》，表面上看，是一个12岁的流浪少年渴望有个家、渴望有父母之爱，却又在得不到后憎恶家、逃离家的故事。但其所反映出的社会问题令人唏嘘不已，战争的阴影随处可见，孩子们过着是影片。</div>
          </div>
        </el-collapse-transition>
        <p @click="showInfo = !showInfo" class="xjt"><img :src="showInfo?'../../../static/img/sjt111.png':'../../../static/img/xiajiantou11.png'" alt=""><span>{{showInfo?'收起':'查看全部'}}</span></p>
      </div>
    </div>
    <div class="goBuy">去购买</div>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  import Swiper from 'swiper';
  import 'swiper/css/swiper.css';
  import Vue from 'vue';
  import {DropdownMenu, DropdownItem,Rate} from 'vant';
  Vue.use(Rate);
  Vue.use(DropdownMenu);
  Vue.use(DropdownItem);
  export default {
    name: "ticketPurchase",
    components: {
      myHead
    },
    data() {
      return {
        lunbolist: [{text: '', url: '../../static/img/movie001.png'}, {text: '', url: '../../static/img/movie001.png'}, {
          text: '',
          url: '../../static/img/movie001.png'
        }], // 轮播图
        showInfo:false
      }
    },
    mounted() {
      let w = document.documentElement.clientWidth;
      let bet = w/(375/180);
      //    这里配置swiper轮播图
      new Swiper('.swiper-container', {
        autoplay: true,
        slidesPerView: 3,
        spaceBetween:bet,
        centeredSlides: true,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
      });
    }

  }
</script>

<style scoped>
  .ticketPurchase {
    width: 100%;
    min-height: 6.67rem;
    box-sizing: border-box;
    padding-top: .5rem;
  }


  /* 轮播图部分 */
  .index_lunbo {
    width: 100%;
    box-sizing: border-box;
    padding: .1rem 0;
  }
  .index_swiper_listimg {
    width: 100%;
    height: 100%;
  }
  /* 轮播图小圆点颜色改变 */
  .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: rgba(252,216,144,.68) !important;
  }
  .swiper-slide>img {
    width: 1.95rem;
  }

  >>> .swiper-container {
    width: 100%;
    height: 100%;
  }
  >>> .swiper-slide {
    text-align: center;
    font-size: .18rem;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    transform: scale(0.8);
  }
  >>> .swiper-slide-active,.swiper-slide-duplicate-active{
    transform: scale(1);
  }
  >>> .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: .1rem;
  }
  >>> .swiper-pagination-bullet {
    width: .08rem;
    height: .08rem;
  }
  >>> .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 .04rem;
  }


  >>> .van-rate__icon {
    font-size: .16rem;
  }
  .mv_info {
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  .star {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .15rem;
  }
  .star>p {
    margin-left: .1rem;
  }
  .mv_msg {
    width: 100%;
    box-sizing: border-box;
    padding: 0 .15rem;
  }
  .mv_tit {
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  .mv_tit>p {
    color: #333333;
    font-size: .18rem;
    font-family:PingFang SC;
    font-weight:500;
    margin-bottom: .06rem;
  }
  .mv_tit>p:nth-child(2) {
    font-size: .13rem;
  }

  .mv_msg>p:nth-child(1),.transition-box {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:400;
    line-height:.18rem;
    color: #333333;
  }
  .xjt {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    margin-top: .05rem;
  }
  .xjt>img {
    width: .12rem;
    height: .07rem;
    margin-right: .1rem;
  }
  .xjt>span {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #C0C0C0;
  }

  .goBuy {
    width:3.3rem;
    height:.44rem;
    background:linear-gradient(0deg,rgba(255,142,65,1),rgba(255,110,0,1));
    box-shadow:0 .06rem .11rem 0 rgba(255,118,17,0.4);
    border-radius:.22rem;
    color: #FFFFFF;
    text-align: center;
    line-height: .44rem;
    margin: .3rem auto 0;
  }

  /* 轮播图小圆点颜色改变 */
  >>> .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: rgba(252,216,144,.68) !important;
  }
</style>
